<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="用户ID" prop="userId">
        <el-input
          v-model="queryParams.userId"
          ref="input"
          placeholder="请输入商品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单编号" prop="orderNo">
        <el-input
          v-model="queryParams.orderNo"
          placeholder="请输入订单编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单编号" prop="goodsName">
        <el-input
          v-model="queryParams.goodsName"
          placeholder="请输入订单编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号" prop="userPhone">
        <el-input
          v-model="queryParams.userPhone"
          ref="input"
          placeholder="请输入商品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="walletList">
      <el-table-column
        label="序号"
        type="index"
        align="center"
        :index="indexMethod"
        width="50px"
      />
      <!-- <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="订单ID" align="center" prop="orderId" /> -->
      <el-table-column label="订单编号" align="center" prop="orderNo" />
      <el-table-column label="订单商品ID" align="center" prop="orderGoodsId" />
      <el-table-column label="商品名称" align="center" prop="goodsName" />
      <el-table-column label="用户手机" align="center" prop="phonenumber" />
      <el-table-column label="退款金额" align="center" prop="money" />
      <el-table-column label="类型" align="center" prop="returnType">
        <template slot-scope="scope">
          <div type="warning" v-if="scope.row.returnType == 1">退款</div>
          <div type="error" v-if="scope.row.returnType == 2">退货退款</div>
        </template>
      </el-table-column>
      <el-table-column
        label="原因"
        align="center"
        prop="description"
      ></el-table-column>
      <el-table-column label="图片" align="center" prop="photo">
        <template slot-scope="scope" v-if="scope.row.photo != null">
          <el-image
            :preview-src-list="scope.row.photo.split(',')"
            style="width: 30px; height: 30px"
            shape="square"
            :src="image"
            :key="image"
            v-for="image in scope.row.photo.split(',')"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="当前状态" align="center" prop="singleItemRefund">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.singleItemRefund == 0"
            >正常</el-tag
          >
          <el-tag type="warning" v-if="scope.row.singleItemRefund == 1"
            >申请退款</el-tag
          >
          <el-tag type="success" v-if="scope.row.singleItemRefund == 2"
            >同意</el-tag
          >
          <el-tag type="error" v-if="scope.row.singleItemRefund == 3"
            >拒绝</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="团长审理状态" align="center" prop="refundAplStatus">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.refundAplStatus == 0"
          >审理中</el-tag
          >
          <el-tag type="warning" v-if="scope.row.refundAplStatus == 1"
          >确认退款</el-tag
          >
          <el-tag type="success" v-if="scope.row.refundAplStatus == 2"
          >拒绝退款</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="180"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleResult(true, scope.$index, scope.row)"
            v-if="scope.row.singleItemRefund == '1'"
            >同意
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleResult(false, scope.$index, scope.row)"
            v-if="scope.row.singleItemRefund == '1'"
            >拒绝
          </el-button>
          <el-button size="mini" type="text" @click="handleDetail(scope.row)"
            >详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 出货订单列对话框 -->
    <el-dialog
      title="订单详情"
      :visible.sync="detailOpen"
      width="800px"
      append-to-body
      :before-close="cancel"
    >
      <el-form ref="form" label-width="80px">
        <el-row style="display: flex; justify-content: space-between">
          <el-form-item label="订单编号">
            <span>{{ "#" + detailInfo.ordersNo }}</span>
          </el-form-item>
          <el-form-item>
            <span
              v-if="detailInfo.payStatus == '10'"
              v-text="
                detailInfo.payOutTime <= currentTimeNow
                  ? '未支付(超时时间:' + parseTime(detailInfo.payOutTime) + ')'
                  : '未支付(已超时)'
              "
            ></span>
            <span v-if="detailInfo.payStatus == '20'"
              >已支付(支付时间:{{ parseTime(detailInfo.payTime) }})</span
            >
          </el-form-item>
        </el-row>

        <el-row style="display: flex; justify-content: space-between">
          <el-form-item label="配送方式">
            <span style="color: red" v-if="detailInfo.distType == '10'"
              >配送(预计配送时间 {{ detailInfo.distTime }})</span
            >
            <span style="color: red" v-if="detailInfo.distType == '20'"
              >自提</span
            >
          </el-form-item>
          <el-form-item label="商品总价">
            <span>{{ detailInfo.totalPrice + "元" }}</span>
          </el-form-item>
          <el-form-item label="优惠价格">
            <span>-{{ detailInfo.reducePrice + "元" }}</span>
          </el-form-item>
          <el-form-item label="配送费用">
            <span>{{ detailInfo.distPrice + "元" }}</span>
          </el-form-item>
          <el-form-item label="合计支付">
            <span>{{ detailInfo.payPrice + "元" }}</span>
          </el-form-item>
        </el-row>
        <el-collapse
          v-model="activeNames"
          :accordion="true"
          @change="handleChange"
        >
          <el-collapse-item title="订购商品详情" name="orderGoods">
            <el-table :data="orderGoodsList" style="width: 100%" border>
              <el-table-column prop="goodsName" label="商品名称" />
              <el-table-column prop="goodsImg" label="商品图">
                <template slot-scope="{ row }">
                  <el-image
                    class="classify-image"
                    :src="row.goodsImg"
                    :preview-src-list="[row.goodsImg]"
                    style="width: 100px; height: 100px"
                    fit="contain"
                    lazy
                  >
                    <div slot="error">
                      <i class="el-icon-document" />
                    </div>
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column prop="goodsPrice" label="商品价格" />
              <el-table-column prop="goodsNum" label="订购数量" />
            </el-table>
          </el-collapse-item>
          <el-collapse-item
            title="小礼品详情"
            name="orderGoodsGift"
            v-if="detailInfo.giftList && detailInfo.giftList.length > 0"
          >
            <el-table :data="detailInfo.giftList" style="width: 100%" border>
              <el-table-column prop="goodsName" label="礼品名称" />
              <el-table-column prop="goodsImg" label="礼品图">
                <template slot-scope="{ row }">
                  <el-image
                    class="classify-image"
                    :src="row.goodsImg"
                    :preview-src-list="[row.goodsImg]"
                    style="width: 100px; height: 100px"
                    fit="contain"
                    lazy
                  >
                    <div slot="error">
                      <i class="el-icon-document" />
                    </div>
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column prop="giftNum" label="礼品数量" />
            </el-table>
          </el-collapse-item>
          <el-collapse-item
            title="订单地址详情"
            name="orderAddress"
            v-if="detailInfo.distType == '10'"
          >
            <div style="display: flex; flex-wrap: wrap">
              <div style="width: 50%">
                收货人姓名：{{ orderAddressInfo.addressName }}
              </div>
              <div style="width: 50%">
                手机号：{{ orderAddressInfo.addressPhone }}
              </div>
              <div style="width: 50%">
                收货地址：{{ orderAddressInfo.addressInfo }}
              </div>
              <div style="width: 50%">
                门牌号：{{ orderAddressInfo.addressHouse }}
              </div>
              <div
                style="width: 50%"
                v-text="orderAddressInfo.sex == '10' ? '性别：男' : '性别：女'"
              ></div>
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="配送点详情"
            name="orderPoint"
            v-if="detailInfo.distType == '20'"
          >
            <div style="width: 50%">
              配送点名称:{{ orderPointInfo.pointName }}
            </div>
            <div style="width: 50%">配送点Id:{{ orderPointInfo.pointId }}</div>
            <div style="width: 50%">
              配送点用户Id:{{ orderPointInfo.courierId }}
            </div>
            <div style="width: 50%">
              配送点电话:{{ orderPointInfo.pointPhone }}
            </div>
            <div style="width: 50%">
              配送点地址:{{ orderPointInfo.address }}
            </div>
            <div style="width: 50%">分拣区域:{{ orderPointInfo.sortArea }}</div>
            <web-map
              v-if="orderPointInfo.lng && orderPointInfo.lat"
              :isDistPoint="true"
              ref="webMap"
              :lng.sync="orderPointInfo.lng"
              :lat.sync="orderPointInfo.lat"
              :address.sync="orderPointInfo.address"
              scope.sync="1"
            ></web-map>
          </el-collapse-item>

          <el-collapse-item
            title="配送员详情"
            name="orderRide"
            :disabled="riderOne"
            v-if="detailInfo.distType == '10'"
          >
            <div class="MainClass">
              <div class="MainChild">
                <img
                  style="width: 50px; height: 50px"
                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                  alt=""
                />
                <div class="subClass">姓名: {{ orderRiderInfo.nickName }}</div>
                <div class="subClass">联系方式: {{ orderRiderInfo.phone }}</div>
              </div>
              <div class="MainChild">
                <!--配送状态 10=等待配送员接单 20=等待配送员取货 30=配送中 40=已送达-->
                <div class="subClass" v-if="detailInfo.distStatus == '10'">
                  当前状态： 等待配送员接单
                </div>
                <div class="subClass">
                  接单时间： {{ detailInfo.distTime10 }}
                </div>
                <div class="subClass">
                  取货时间： {{ detailInfo.distTime20 }}
                </div>
                <div class="subClass">
                  送达时间： {{ detailInfo.distTime30 }}
                </div>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="自提详情"
            name="orderRideZiTi"
            v-if="detailInfo.distType == '20'"
          >
            <div style="display: flex; flex-wrap: wrap">
              <div style="width: 50%" v-if="detailInfo.selfStatus == '10'">
                自提状态：待自提
              </div>
              <div style="width: 50%" v-if="detailInfo.selfStatus == '20'">
                自提状态：已自提
              </div>
              <div style="width: 50%">
                预计自提时间：{{ detailInfo.selfTime }}
              </div>
              <div style="width: 50%" v-if="detailInfo.selfStatus == '20'">
                实际自提时间：{{ detailInfo.pickTime }}
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
        <el-row v-if="formStatus == 1">
          <el-form-item label="接单状态" style="margin-top: 20px">
            <el-radio-group v-model="detailInfo.distShopStatus">
              <el-radio-button label="20">确认接单</el-radio-button>
              <el-radio-button label="30">订单拒绝</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="操作描述" prop="distShopDesc">
            <el-input
              type="textarea"
              v-model="detailInfo.distShopDesc"
              placeholder="请输入操作描述"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="formStatus == 1"
          >确 定</el-button
        >
        <el-button @click.native="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getOrders,
  refundListSingle,
  refundListSingleAgree,
  refundListSingleRefuse,
} from "@/api/system/refundOrder";
import { getOrderGoodsList } from "@/api/system/orderGoods"; //根据订单编号 查询订单商品明细
import { getOrderAddressDetil } from "@/api/system/orderAddress"; //根据订单编号 查询订单商品明细
import { getOrderPointDetil } from "@/api/system/orderPoint";
import { getOrderRiderDetil } from "@/api/system/orderCourier";
import WebMap from "@/components/WebMap"; // svg component
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
import store from "@/store";

export default {
  name: "Goods",
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: undefined,
        orderNo: undefined,
        userPhone: undefined,
        goodsName: undefined
      },

      total: 0,
      detailOpen: false,
      detailInfo: {},
      walletList: [],
      loading: false,
      activeNames: undefined,
      currentTimeNow: undefined,
      riderOne: undefined,
      riderTitle: undefined,
      formStatus: undefined,
      orderGoodsList: [],
      orderAddressInfo: {},
      orderPointInfo: {},
      orderRiderInfo: {},
    };
  },

  components: {
    WebMap,
  },

  created() {
    const roles = store.getters && store.getters.roles;
    if (roles.indexOf("admin") > -1) {
      this.isExpand = true;
    }
    this.getList();
  },
  methods: {
    handleDetail(row) {
      console.log(row);
      this.activeNames = ["0"];
      this.currentTimeNow = new Date();
      const ordersId = row.orderId;
      getOrders(ordersId).then((res) => {
        this.detailInfo = res.data;
        if (this.detailInfo.distStatus == "10") {
          //未接单
          this.riderOne = true; //是否可展开详情
          this.riderTitle = "配送员详情(未接单)";
        }
        if (
          this.detailInfo.payStatus == "20" &&
          this.detailInfo.distShopStatus == "10"
        ) {
          this.formStatus = 1;
        }
        this.detailOpen = true;
      });
    },
    //折叠面板
    handleChange(val) {
      console.log(val);
      if (val != undefined) {
        if (val == "orderGoods") {
          if (this.orderGoodsList.length == 0) {
            //根据订单编号 获取订单商品明细
            console.log("获取订单商品明细");
            getOrderGoodsList(this.detailInfo.ordersId).then((response) => {
              this.orderGoodsList = response.data;
            });
          }
        } else if (val == "orderAddress") {
          //获取订单地址详情
          console.log("获取订单地址详情");
          if (this.orderAddressInfo == "") {
            getOrderAddressDetil(this.detailInfo.ordersId).then((response) => {
              this.orderAddressInfo = response.data;
            });
          }
        } else if (val == "orderPoint") {
          //获取配送点详情
          console.log("获取配送点详情");
          if (this.orderPointInfo.ordersPointId == undefined) {
            getOrderPointDetil(this.detailInfo.ordersId).then((response) => {
              this.orderPointInfo = response.data;
            });
            let that = this;
            setTimeout(function () {
              that.$refs.webMap.init(
                String(that.orderPointInfo.lng),
                String(that.orderPointInfo.lat)
              );
              that.$refs.webMap.setRadius(1);
            }, 1000);
          }
        } else if (val == "orderRide") {
          //获取配送员详情
          getOrderRiderDetil(this.detailInfo.ordersId).then((response) => {
            this.orderRiderInfo = response.data;
          });
        }
      }
    },
    cancel() {
      this.detailOpen = false;
      //查询详情订单商品明细
      this.orderGoodsList = [];
      //订购地址详情
      this.orderAddressInfo = "";
      //配送点详情
      this.orderPointInfo = "";
      //配送员详情
      this.orderRiderInfo = "";
      this.detailInfo = {};
    },
    indexMethod(index) {
      return (
        index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
      );
    },
    /** 查询商品信息列表 */
    getList() {
      this.loading = true;
      refundListSingle(this.queryParams).then((response) => {
        this.walletList = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        goodsVideo: undefined,
        goodsId: undefined,
      };
      console.log(this.form);
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    arrToStr(arr) {
      if (arr.length <= 0) return "";
      return arr
        .map((item) => {
          return item.response.url;
        })
        .join(",");
    },
    strToArr(str) {
      if (str == "") return [];
      return str.split(",").map((item) => {
        return {
          url: item,
          response: {
            url: item,
          },
        };
      });
    },

    handleResult(bol, index, info) {
      if (bol) {
        refundListSingleAgree({
          id: info.id,
        }).then(() => {
          this.walletList[index].singleItemRefund = 2;
        });
      } else {
        refundListSingleRefuse({
          id: info.id,
        }).then(() => {
          this.walletList[index].singleItemRefund = 3;
        });
      }
    },
  },
};
</script>
<style scoped>
</style>
